<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--引入vue相应文件-->
    <script src="../js/vue.js"></script>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 引入ElementUI组件库 -->
    <script src="../elementUI/index.js"></script>
    <!-- 引入docs样式 -->
    <link rel="stylesheet" href="../css/docs.css">
    <!-- 引入博客样式 -->
    <link rel="stylesheet" href="../commonCSS/blog.css">
</head>

<body>
    <div id="app" style="margin:50px;">
        <h1>Button 按钮</h1>
        <p>常用的操作按钮。</p>

        <h2>基础用法</h2>
        <p>基础的按钮用法。</p>

        <div class="source demo-block demo-zh-CN demo-button">
            <el-row>
                <el-button>默认按钮</el-button>
                <el-button type="primary">主要按钮</el-button>
                <el-button type="success">成功按钮</el-button>
                <el-button type="info">信息按钮</el-button>
                <el-button type="warning">警告按钮</el-button>
                <el-button type="danger">危险按钮</el-button>
            </el-row>

            <el-row>
                <el-button plain>朴素按钮</el-button>
                <el-button type="primary" plain>主要按钮</el-button>
                <el-button type="success" plain>成功按钮</el-button>
                <el-button type="info" plain>信息按钮</el-button>
                <el-button type="warning" plain>警告按钮</el-button>
                <el-button type="danger" plain>危险按钮</el-button>
            </el-row>

            <el-row>
                <el-button round>圆角按钮</el-button>
                <el-button type="primary" round>主要按钮</el-button>
                <el-button type="success" round>成功按钮</el-button>
                <el-button type="info" round>信息按钮</el-button>
                <el-button type="warning" round>警告按钮</el-button>
                <el-button type="danger" round>危险按钮</el-button>
            </el-row>

            <el-row>
                <el-button icon="el-icon-search" circle></el-button>
                <el-button type="primary" icon="el-icon-edit" circle></el-button>
                <el-button type="success" icon="el-icon-check" circle></el-button>
                <el-button type="info" icon="el-icon-message" circle></el-button>
                <el-button type="warning" icon="el-icon-star-off" circle></el-button>
                <el-button type="danger" icon="el-icon-delete" circle></el-button>
            </el-row>
        </div>
        <br/>



        <h2>禁用状态</h2>
        <p>按钮不可用状态。</p>
        <div class="source demo-block demo-zh-CN demo-button">
            <el-row>
                <el-button disabled>默认按钮</el-button>
                <el-button type="primary" disabled>主要按钮</el-button>
                <el-button type="success" disabled>成功按钮</el-button>
                <el-button type="info" disabled>信息按钮</el-button>
                <el-button type="warning" disabled>警告按钮</el-button>
                <el-button type="danger" disabled>危险按钮</el-button>
            </el-row>

            <el-row>
                <el-button plain disabled>朴素按钮</el-button>
                <el-button type="primary" plain disabled>主要按钮</el-button>
                <el-button type="success" plain disabled>成功按钮</el-button>
                <el-button type="info" plain disabled>信息按钮</el-button>
                <el-button type="warning" plain disabled>警告按钮</el-button>
                <el-button type="danger" plain disabled>危险按钮</el-button>
            </el-row>
        </div>
        <br/>


        <h2>文字按钮</h2>
        <p>没有边框和背景色的按钮。</p>
        <div class="source  demo-block demo-zh-CN demo-button">
            <el-button type="text">文字按钮</el-button>
            <el-button type="text" disabled>文字按钮</el-button>
        </div>
        <br/>

        <h2>图标按钮</h2>
        <p>带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。</p>
        <p>设置 <span class="code">icon</span> 属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用i标签即可，可以使用自定义图标。</p>

        <div class="source demo-block demo-zh-CN demo-button">
            <el-button type="primary" icon="el-icon-edit"></el-button>
            <el-button type="primary" icon="el-icon-share"></el-button>
            <el-button type="primary" icon="el-icon-delete"></el-button>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
            <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
        </div>

        <h2>按钮组</h2>
        <p>以按钮组的方式出现，常用于多项类似操作。</p>
        <p>使用&lt;<span class="code">el-button-group</span>&gt;标签来嵌套你的按钮。</p>
        <div class="source demo-block demo-zh-CN demo-button">
            <el-button-group>
                <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
                <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
            <el-button-group>
                <el-button type="primary" icon="el-icon-edit"></el-button>
                <el-button type="primary" icon="el-icon-share"></el-button>
                <el-button type="primary" icon="el-icon-delete"></el-button>
            </el-button-group>
        </div>
        <br/>


        <h2>加载中</h2>
        <p>点击按钮后进行数据加载操作，在按钮上显示加载状态。</p>
        <p>要设置为 loading 状态，只要设置 <span class="code">loading</span> 属性为 <span class="code">true</span> 即可。</p>
        <p>置为false之后，转圈图标没了，只剩下“加载中”</p>
        <div class="source demo-block demo-zh-CN demo-button">
            <el-button type="primary" :loading="true">加载中</el-button>
        </div>
        <br/>





        <h2>不同尺寸</h2>
        <p>Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。</p>
        <p>额外的尺寸：medium、small、mini，通过设置size属性来配置它们。</p>
        <div class="source demo-block demo-zh-CN demo-button">
            <el-row>
                <el-button>默认按钮</el-button>
                <el-button size="medium">中等按钮</el-button>
                <el-button size="small">小型按钮</el-button>
                <el-button size="mini">超小按钮</el-button>
            </el-row>
            <el-row>
                <el-button round>默认按钮</el-button>
                <el-button size="medium" round>中等按钮</el-button>
                <el-button size="small" round>小型按钮</el-button>
                <el-button size="mini" round>超小按钮</el-button>
            </el-row>
        </div>
        <br/>


        <h2>el-button 属性/Attributes</h2>
        <table class="common-table">
            <thead>
                <tr>
                    <th>参数</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>可选值</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>size</td>
                    <td>尺寸</td>
                    <td>string</td>
                    <td>medium / small / mini</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>type</td>
                    <td>类型</td>
                    <td>string</td>
                    <td>primary / success / warning / danger / info / text</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>plain</td>
                    <td>是否朴素按钮</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>round</td>
                    <td>是否圆角按钮</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>circle</td>
                    <td>是否圆形按钮</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>loading</td>
                    <td>是否加载中状态</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用状态</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>icon</td>
                    <td>图标类名</td>
                    <td>string</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>autofocus</td>
                    <td>是否默认聚焦</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>native-type</td>
                    <td>原生 type 属性</td>
                    <td>string</td>
                    <td>button / submit / reset</td>
                    <td>button</td>
                </tr>
            </tbody>
        </table>
        <br/>





        <br/>
        <br/>
        <br/>

    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                show: true
            }
        },
    });
</script>

</html>